<template>
  <div style="margin: 0 auto;">
    <div class="box1" ref="btn1"></div>
    <div class="box2" ref="btn2"></div>
    <div class="box3" ref="btn3"></div>
    <div class="box4" ref="btn4"></div>

    <el-button @click="acquire" >获取高度</el-button>
    <el-button @click="to1">去btn1</el-button>
    <el-button @click="to2">去btn2</el-button>
    <el-button @click="to3">去btn3</el-button>
    <el-button @click="to4">去btn4</el-button>
  </div>
</template>

<script>

  export default {
    name: "index",
    components: {},
    data() {
      return {}
    },
    computed: {},
    created() {

    },
    mounted() {
      window.addEventListener("scroll", this.handleScroll, true);

    },
    methods: {
      acquire() {
        console.log(this.$refs.btn1.offsetHeight);
        console.log(this.$refs.btn2.offsetHeight);
        console.log(this.$refs.btn3.offsetHeight);
        console.log(this.$refs.btn4.offsetHeight);

        // window.scrollTo({
          // 'top': 150,
          // 'behavior': 'smooth'
        // })
      },

      handleScroll(e) {
        let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;

        if (scrollTop<350){
          console.log("scrollTop<350")
        }else if(scrollTop>350 && scrollTop<750){
          console.log("scrollTop>350 && scrollTop<750")
        }else if(scrollTop>750 && scrollTop<1250){
          console.log("scrollTop>350 && scrollTop<1250")

        }
        // 检测它的值对它进行一定的操作
      },

      to1(){
        window.scrollTo({
          'top': 0,
          // 'behavior': 'smooth'
        })
      },
      to2(){
        window.scrollTo({
          'top': 350,
          // 'behavior': 'smooth'
        })
      },
      to3(){
        window.scrollTo({
          'top': 750,
          // 'behavior': 'smooth'
        })
      },
      to4(){
        window.scrollTo({
          'top': 1250,
          // 'behavior': 'smooth'
        })
      }
    }
  }
</script>

<style scoped>
  .box1{
    width: 200px;
    height: 300px;
    background-color: #bfa;
  }
  .box2{
    width: 200px;
    height: 400px;
    background-color: rebeccapurple;
  }

  .box3{
    width: 200px;
    height: 500px;
    background-color: #ff6700;
  }
  .box4{
    width: 200px;
    height: 600px;
    background-color: olive;
  }


</style>
